<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!--使用veu开发前端-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

<!-- 使用bootStrap引入文件时需要注意顺序，最好按照以下顺序引入 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>


</head>
<body>
	<!--head，分为3行-->
	<div id="registID" class="container-fluid"
		style="height: 800px; width: 80%; border: 1px solid grey;">
		<br>
		<div class="row">
			<div class="col-sm-3">
				<img style="height: 100px; height: 90px;" src="images/logo.png">
			</div>
			<div class="col-sm-9">
				<img src="images/line.png">
			</div>
		</div>
		<br>
		<div class="row">
			<div class="col-sm-4"></div>
			<div class="col-sm-4">
				<div class="row" style="background-color: grey;">
					<font style="color: white;">账户信息</font>
				</div>
				<br>
				<div class="row">
					请输入账号：&nbsp;&nbsp;&nbsp;&nbsp;<input v-model="account" type="text" name="account">
				</div>
				<br>
				<div class="row">
					请输入密码：&nbsp;&nbsp;&nbsp;&nbsp;<input v-model="pwd" type="text" name="pwd">
				</div>
				<br>
				<div class="row">
					请确认密码：&nbsp;&nbsp;&nbsp;&nbsp;<input v-model="pwds" type="text" name="pwds">
				</div>
				<br>
				<div class="row">
					请输身份证号：<input v-model="number" type="text" name="number">
				</div>
				<br>
				<div class="row">
					请输手机号：&nbsp;&nbsp;&nbsp;&nbsp;<input v-model="phone" type="text" name="phone">
				</div>
				<br>
				<div class="row">
					请输入邮箱：&nbsp;&nbsp;&nbsp;&nbsp;<input v-model="email" type="text" name="email">
				</div>
				<br>
				<div class="row">
					请输验证码：&nbsp;&nbsp;&nbsp;&nbsp;<input v-model="code" type="text" name="code"
						style="width: 100px;"><img alt="" src="code/getCode">
				</div>
			</div>
			<div class="col-sm-4">
				<div>
					已有账户去<font style="color: red;"><a href="login.html">登录</a></font>
				</div>
			</div>
		</div>
		<br>
		<div class="row">
			<div class="col-sm-5"></div>
			<div class="col-sm-3">
				<button class="btn btn-success" @click="regist()">注册</button>
			</div>
			<div class="col-sm-4"></div>
		</div>


	</div>

	<!--使用veu与后台进行交互，发送请求到后台-->
	<script type="text/javascript">
		
		new Vue({
			el:"#registID",
			data:{
				account:"",
				pwd:"",
				pwds:"",
				phone:"",
				email:"",
				code:"",
				number:""
			},
/*			mouted(){//当页面加载完毕时，发送请求
               axios.post('user/login')
               .then(res =>){
               	  alert("发送请求返回来的数据");
               	  console.info(res);

               }
			},*/
			methods:{
				regist:function(){
					//alert(this.account+","+this.pwd);
					// 1 得到用户输入的账户和密码，发送登录请求
					var param = new URLSearchParams();
					param.append("account",this.account);
					param.append("password",this.pwd);
					param.append("phone",this.phone);
					param.append("email",this.email);
					param.append("code",this.code);
					param.append("number",this.number);
					// 得到用户输入的账户和密码，发送登录请求
					 axios.post('user/regist',param).then(res =>{
					 	console.info(res);
					 	if(res.status == 200 && res.data.status == "success"){
					 		window.location = 'login.html';
					 	}
					 })
					    
					// 2 发送到后端，进行账号和密码的判断
					// 3 如果账号和密码正确，跳转到首页
				}
			}
		});
	</script>


</body>
</html>